<template>
	<div id="home">
		<!--轮播图S-->
			<div style="height: 40vw;">				
			<mt-swipe :auto="4000">
			  <mt-swipe-item>
			  	<img style="width: 100%;" src="https://y.gtimg.cn/music/photo_new/T003R720x288M000000tYpKN3c3M7K.jpg?max_age=2592000" alt="" />
			  </mt-swipe-item>
			  
			  <mt-swipe-item>
			  	<img style="width: 100%;" src="https://y.gtimg.cn/music/photo_new/T003R720x288M000000tYpKN3c3M7K.jpg?max_age=2592000" alt="" />
			  </mt-swipe-item>
			  
			  <mt-swipe-item>
			  	<img style="width: 100%;" src="https://y.gtimg.cn/music/photo_new/T003R720x288M000000tYpKN3c3M7K.jpg?max_age=2592000" alt="" />
			  </mt-swipe-item>			  
			</mt-swipe>	
		</div>
		
		<!--轮播图E-->
		<div class="home_mo_list">
		<ul class="home_ul">
			<li v-for="(item,index) in songList" @click="gotoList(item.id)" class="home_li">
				<img :src="item.picUrl" />
				<p>{{item.songListDesc}}</p>
			</li>
		</ul>
		</div>
		
	</div>
</template>

<script>
	//引入api.js,包括请求地址和参数方法
	import api from "../js/api.js";

	export default {
		data: function() {
			return {
				songList: [],
			}
		},
		created: function() {
			//请求首页接口
			api.getRecommend().then((res) => {
				console.log(res.data)
				//具体逻辑操作
				//保存数据歌单数据
				this.songList = res.data.songList
			})
		},
		methods: {
			gotoList: function(id) {
				console.log(id);
				this.$router.push({
					path: "/list",
					query: {
						id: id
					}

				})
			}
		},
	}
</script>

<style lang="scss">
	@import "../scss/home.scss";
	
	
</style>